<template>
  <div class="header-bar">
    <sider-trigger v-if="siderTrigger" :collapsed="collapsed" icon="md-menu"
                   @on-change="handleCollpasedChange"></sider-trigger>
    <custom-bread-crumb show-icon style="margin-left: 30px;" :list="breadCrumbList"></custom-bread-crumb>
    <div class="custom-content-con">
      <slot>11111111111</slot>
    </div>
  </div>
</template>
<script setup>
import siderTrigger from './sider-trigger'
import customBreadCrumb from './custom-bread-crumb'
import './header-bar.less'
import {useAppStore} from "@/stores/app.js";
import {storeToRefs} from "pinia";

const appStore = useAppStore()
const {
  breadCrumbList
} = storeToRefs(appStore)
const props = defineProps({
  collapsed: Boolean,
  siderTrigger: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits(['on-coll-change'])
function  handleCollpasedChange(state) {
  emit('on-coll-change', state)
}
</script>
